﻿<template>
  <div class="service-container">
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="serviceParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    >
      <template #menu-after>
        <el-button>导出</el-button>
      </template>
    </avue-table-search>
    <base-table-card>
      <template #header-left>
        <el-tabs v-model="currentType" class="demo-tabs" @tab-change="handleTabClick">
          <el-tab-pane label="未上架" :name="2"></el-tab-pane>
          <el-tab-pane label="已上架" :name="1"></el-tab-pane>
          <el-tab-pane label="已下架" :name="0"></el-tab-pane>
        </el-tabs>
      </template>
      <template #header-right>
        <el-button type="primary" class="add-btn" @click="handleOpenModal('add', null)">新增增值服务</el-button>
      </template>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadTableSearch"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #type="{ row }">{{ typeName(row.additionalType) }}</template>

        <template #price="{ row }"> ¥{{ row.price }} </template>

        <template #forceFlag="{ row }">
          {{ row.forceFlag === 1 ? "需购买" : "无需购买" }}
        </template>

        <template #rentPercent="{ row }"> {{ row.rentPercent }}% </template>

        <template #menu="{ row }">
          <el-popconfirm
            :title="row.status === 1 ? '确定要下架该增值服务吗？' : '确定要上架该增值服务吗？'"
            @confirm="handleLaunchOperate(row)"
          >
            <template #reference>
              <el-button link type="primary">{{ [2, 0].includes(row.status) ? "上架" : "下架" }}</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" @click="handleOpenModal('edit', row)">编辑</el-button>
          <el-button link type="primary" @click="copyData(row.id)">复制</el-button>
          <el-popconfirm title="确定要删除该增值服务吗？" @confirm="handleDelData(row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </avue-crud>
    </base-table-card>
    <service-operate
      :visble="serviceModalShow"
      :current-info="currentData"
      :modal-type="operateType"
      :service-list="serviceList"
      @hide="handleHideModal"
    />
  </div>
</template>

<script setup>
  import option from "@/crudOption/value-added-service/search.js";
  import ServiceOperate from "./componets/ServiceOperate.vue";

  // 当前类别
  const currentType = ref(2);
  // 弹窗显示隐藏
  const serviceModalShow = ref(false);
  // 当前数据
  const currentData = ref({});
  // 弹窗类型
  const operateType = ref("");
  // 增值服务类型
  const serviceList = ref([]);
  //
  const { searchOption, tableOption } = option(serviceList.value);
  onMounted(() => {
    loadGetTableData();
    loadTypeData();
  });
  const typeName = computed(() => item => {
    const currentItem = serviceList?.value?.find(el => el.dictValue === item);
    if (currentItem) {
      return currentItem.dictLabel;
    } else {
      return "";
    }
  });
  // 获取字典内容
  const loadTypeData = () => {
    Api.common.getDictionaryData({ dictCode: "qingyun.support.customer.additionalServices" }).then(res => {
      serviceList.value = res.data;
    });
  };
  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: serviceParams,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getValueAddedService,
    dataRes: "data.records",
    dataTotal: "data.total",
    getParamsFormat: params => {
      console.warn(params);

      const searchParams = {
        ...params,
        status: currentType.value,
      };
      if (searchParams?.addDate?.length) {
        searchParams.startTime = `${params.addDate[0]} 00:00:00`;
        searchParams.endTime = `${params.addDate[1]} 23:59:59`;
        delete searchParams.addDate;
      }
      if (searchParams?.editDate?.length) {
        searchParams.updateStartTime = `${params.editDate[0]} 00:00:00`;
        searchParams.updateEndTime = `${params.editDate[1]} 23:59:59`;
        delete searchParams.editDate;
      }
      if (searchParams?.forceFlag === 3) {
        searchParams.forceFlag = "";
      }
      return searchParams;
    },
  });
  // tab切换
  const handleTabClick = tabs => {
    console.warn(tabs);
    currentType.value = tabs;
    loadGetTableData();
  };
  // 打开新增弹窗
  const handleOpenModal = (type, info) => {
    if (type === "add") {
      currentData.value = {};
    } else {
      currentData.value = { ...info };
    }
    operateType.value = type;
    serviceModalShow.value = true;
  };
  // 关闭弹窗
  const handleHideModal = refresh => {
    currentData.value = {};
    operateType.value = "";
    serviceModalShow.value = false;
    if (refresh) {
      loadGetTableData();
    }
  };
  // 删除
  const handleDelData = id => {
    Api.product.delService({ id }).then(() => {
      $msg.success("删除成功");
      loadGetTableData();
    });
  };
  // 上下架
  const handleLaunchOperate = info => {
    Api.product.launchService({ id: info.id, status: [0, 2].includes(info.status) ? 1 : 0 }).then(() => {
      $msg.success("操作成功");
      loadGetTableData();
    });
  };
  // 复制
  const copyData = id => {
    Api.product.copyService({ id }).then(() => {
      $msg.success("复制成功");
      loadGetTableData();
    });
  };
</script>

<style lang="scss" scoped>
  .service-container {
    padding: 16px;
    .service-table {
      padding: 16px;
      background: var(--bg);
      border-radius: 12px;
      .add-btn {
        margin-bottom: 16px;
      }
    }
  }
</style>
